<template>
    <div id="temp">

        <!-- loading动画 -->
        <div :class="{loading:true,isLoadingShow:isShow}">
            <img src="../../../statics/imgs/loading.gif" alt="">
        </div>

        <!-- 顶部导航 -->
        <p class="common_style">
            <span class="greenStyle">课程管理</span> / 创建课程
        </p>

        <!-- 课程列表 -->
        <div class="lesson_list">
            <div class="lesson_select">
                <select class="form-control lesson_select_item input-sm">
                    <option>按讲师</option>
                </select>
                <select class="form-control lesson_select_item input-sm">
                    <option>按类别</option>
                </select>
                <select class="form-control lesson_select_item input-sm">
                    <option>按课时</option>
                </select>
                <button type="button" class="btn btn-success btn-sm" style="margin-top:-3px">筛选</button>

                <!-- 搜索功能 -->
                <form class="fr lesson_search clearfix">
                    <input type="text" class="form-control input-sm fl"> <button type="button" class="btn btn-success btn-sm fl">搜索</button>
                </form>
            </div>
            <ul>
                <li>
                    <img src="../../../statics/imgs/lesson1.png" alt="/">
                    <div class="right_info">
                        <h4>前端初级工程师</h4>
                        <p>
                            讲师：<span>老虎</span> 类别：面向对象
                        </p>
                        <p>
                            课时：<span>32</span> 学员：<span>9527</span>
                        </p>
                        <p>浏览：<span>12345</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isShow: true
            }
        },
        created() {

        },
        watch: {
            "$route": function () {
                setTimeout(function () {
                    this.isShow = false;
                    alert(111)
                }, 3000)
            }
        }
    }
</script>
<style scoped lang="less">
    #temp {
        padding: 15px;
        .loading {
            width: 1400px;
            height: 700px;
            position: fixed;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 700px;
            background-color: rgba(0, 0, 0, .3);
        }
        .isLoadingShow {
            display: none;
        }
        .normal_style {
            font-size: 14px;
            color: #333;
        }
        h3 {
            line-height: 50px;
            border-bottom: 1px solid #dedede;
            text-indent: 10px;
        }
        .common_style {
            background-color: #fff;
            border: 1px solid #dedede;
            border-radius: 5px;
        }

        >p {
            padding-left: 1em;
            line-height: 40px;
        }

        .greenStyle {
            color: #337ab7;
        }
        .lesson_list {
            width: 100%;
            background-color: #fff;
            margin-top: 20px;
            .lesson_select {
                width: 100%;
                height: 60px;
                border-bottom: 1px solid #ddd;
                line-height: 60px;
                padding: 0 20px;
                .lesson_select_item {
                    display: inline-block;
                    width: 100px;
                }
                .lesson_search {
                    margin-top: 15px;
                    input {
                        width: 150px;
                    }
                }
            }
            ul {
                width: 100%;
                li {
                    display: flex;
                    height: 100%;
                    margin: 20px;
                    border-bottom: 1px dashed #ddd;
                    &:last-of-type {
                        border: none;
                    }
                    img {
                        width: 240px;
                        height: 120px;
                    }
                    .right_info {
                        flex: 1;
                        height: 100%;
                        padding: 20px;
                        h4 {
                            font-weight: 700;
                            margin-bottom: 20px;
                        }
                        p {
                            color: #999;
                        }
                    }
                }
            }
        }
    }
</style>